import { defineComponent, watch, shallowReactive, ref } from 'vue'
import * as echarts from 'echarts'
// 声明类型
const PropsType = {
  data: {
    type: Object,
    default: () => ({}),
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  
  setup(props) {
    // 定义 ref
    const chartRef = ref()
    let color = ['rgba(20, 204, 131, 1)', 'rgba(49, 193, 245, 1)','rgba(46, 88, 229, 1)','rgba(229, 138, 46, 1)','rgba(229, 92, 46, 1)'];
    // 配置项
    let options = {}
    const setData = (val) =>{
      let data = []
      for (let i = 0; i < val.length; i++) {
        data.push(
          {
            value: parseFloat(val[i].value)*100,
            name: val[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                // shadowBlur: 20,
                borderColor: color[i],
                // shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0,
              },
            },
          }
        );
      }
      return data
    }

    watch(
      () => props.data,
      (val: any) => {
        //
        
        options = {
          color: color,
          title: [{
            text: '种植总面积：',
            top: '10%',
            left: '0%',
            // padding:[-15,0,0,-15],
            textStyle: {
              color: '#fff',
              fontSize: 12,
              fontWeight: '500',
              height:16,
              lineHeight:'16'
            },
          },
          {
            text: `${val.count}亩`,
            top: '25%',
            left: '0%',
            // padding:[-15,0,0,-15],
            textStyle: {
              color: '#fff',
              fontSize: 24,
              fontWeight: 'bold',
              height:24,
              lineHeight:'24'
            },
          }],
          legend: {
            // icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
            left: '58%',
            top: '10%',
            height:'100%',
            itemWidth: 20,
            orient: 'horizontal',
            formatter: (name) => {
              const item = val.list.find((i) => {
                return i.name === name;
              });
              return '{name|' + name + ':   '+parseInt(item.count)+'亩  }' + '{' + item.color + '|' + (parseFloat(item.value)*100).toFixed(2) + '%}';
            },
            textStyle: {
              color: '#D8DDE3',
              rich: {
                name: {
                  fontSize: 14,
                  color: '#D8DDE3',
                },
                yellow: {
                  padding: [0, 0, 0, 10],
                  // color: 'rgba(229, 138, 46, 1)',
                  fontSize: 16,
                  fontWeight: 'bold'
                },
                green: {
                  padding: [0, 0, 0, 10],
                  // color: '#04c673',
                  fontSize: 16,
                  fontWeight: 'bold'
                },
                blue: {
                  padding: [0, 0, 0, 10],
                  // color: '#0faeff',
                  fontSize: 16,
                  fontWeight: 'bold'
                },
                lightBlue: {
                  padding: [0, 0, 0, 10],
                  // color: 'rgba(49, 193, 245, 1)',
                  fontSize: 16,
                  fontWeight: 'bold'
                },
                orange: {
                  padding: [0, 0, 0, 10],
                  // color: 'rgba(229, 92, 46, 1)',
                  fontSize: 16,
                  fontWeight: 'bold'
                },
              },
            },
          },
          series: [
            {
              name: '',
              type: 'pie',
              center: ["40%", "50%"],
              radius: [40, 60],
              data: setData(val.list),
              label: {
                show: false
              }
            },
          ]
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options,true)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "160px"
      const width = "432px"

      return <div>
        <echart ref={chartRef} options={options} height={height} width={width} />
      </div>
    }
  }
})

